Render Date

The useRenderDate hook from the Blotch Library returns the real time your Frame is being prepared, before the clock was moved forward to the moment it goes on display.

import { useFetch } from "~lib/use-fetch";
import { useRenderDate } from "~lib/use-render-date";

const Widget = () => {
  const renderDate = useRenderDate();
  const timestamp = Math.floor(renderDate.getTime() / 1000);

  const { data } = useFetch<{ price: number }>(
    `https://api.example.com/price?timestamp=${timestamp}`,
  );

  return <h1>{data.price}</h1>;
};

You will rarely need it. Use it only for an API that checks a timestamp you send against its own clock, such as a signed request, and turns away one that is a few minutes out. For anything your Widget shows, use new Date(), as Date and Time explains.

In the Widget Designer preview, it gives you the current time.